<template>
	<view>
		<view class="logo">
			<view class="img">
				<image src="/static/img/logo.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="form re">
			<view class="username">
				<view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">{{getCodeText}}</view>
				<input placeholder="请输入手机号" v-model="phone" type="number"
					placeholder-style="color: rgba(255,255,255,0.8);" />
			</view>

			<view class="code">
				<input placeholder="请输入验证码" v-model="code" type="number" maxlength="6"
					placeholder-style="color: rgba(255,255,255,0.8);" />
			</view>
			<view class="code">
				<input placeholder="请输入登录密码" v-model="password_login" password=true
					placeholder-style="color: rgba(255,255,255,0.8);" />
			</view>
			<view class="code">
				<input placeholder="请输入支付密码" v-model="password_pay" password=true
					placeholder-style="color: rgba(255,255,255,0.8);" />
			</view>
			<view class="password">
				<input placeholder="请输入邀请码" v-model="recommend" placeholder-style="color: rgba(255,255,255,0.8);" />
			</view>
			<view class="btn" @tap="doReg">立即注册</view>
			<view class="res">
				<view @tap="toLogin">已有账号立即登录</view>
			</view>
			<view class="agree_box">
				<label class="radio">
					<radio value="1" :checked="agree" @tap="read" />阅读即同意<text @click="to_agree">《优品创购商城注册协议》</text>
				</label>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		Register,
		SendCode
	} from "@/api/api.js"
	import md5 from "@/common/SDK/md5.min.js";
	export default {
		data() {
			return {
				code: '',
				getCodeText: '获取验证码',
				getCodeBtnColor: "#ffffff",
				getCodeisWaiting: false,
				recommend: '',
				password_pay: '',
				password_login: '',
				phone: '',
				isdoReg: true,
				agree: false
			}
		},
		onLoad(e) {
			if (e.recommend != '') {
				this.recommend = e.recommend
			}
		},
		methods: {
			read() {
				this.agree = true
			},
			to_agree() {
				uni.navigateTo({
					url: '/pages/login/agree'
				})
			},
			Timer() {},
			getCode() {
				uni.hideKeyboard()
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "rgba(255,255,255,0.5)"
				let that = this
				//示例用定时器模拟请求效果
				setTimeout(() => {
					// uni.showToast({
					// 	title: '验证码已发送',
					// 	icon: "none"
					// });
					SendCode({
						phone: this.phone,
						type: 'reg',
					}).then(res => {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					})
					//示例默认1234，生产中请删除这一句。
					// this.code = 1234;
					this.setTimer();
				}, 1000)
			},
			setTimer() {
				let holdTime = 60;
				this.getCodeText = "重新获取(60)"
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#ffffff";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer);
						return;
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;

				}, 1000)
			},
			doReg() {
				if (!this.agree) {
					uni.showToast({
						title: '请先同意注册协议',
						icon: "none"
					});
					return false;
				}
				uni.hideKeyboard()
				//模板示例部分验证规则
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				if (this.isdoReg) {
					this.isdoReg = false
					Register({
						phone: this.phone,
						password_login: this.password_login,
						password_pay: this.password_pay,
						recommend: this.recommend,
						code: this.code
					}).then(res => {
						setTimeout(() => {
							this.isdoReg = true
						}, 3000)
						console.log(res);
						uni.showToast({
							title: res.message,
							icon: "none"
						})
						if (res.status == 1) {
							setTimeout(() => {
								// #ifdef H5
								window.location.href = getApp().globalData.data.websiteUrl +
									'download.html'
								// #endif
								// #ifdef APP-PLUS
								uni.navigateBack({})
								// #endif
							}, 1000)
						}
					})
					//模板示例把用户注册信息储存在本地，实际使用中请替换为上传服务器。
					setTimeout(() => {

						uni.getStorage({
							key: 'UserList',
							success: (res) => {
								//增加记录，密码md5
								res.data.push({
									username: this.phoneNumber,
									passwd: md5(this.passwd)
								})
								uni.setStorage({
									key: 'UserList',
									data: res.data,
									success: function() {
										uni.hideLoading()
										uni.showToast({
											title: '注册成功',
											icon: "success"
										});
										setTimeout(function() {
											uni.navigateBack();
										}, 1000)
									}
								});
							},
							fail: (e) => {
								uni.hideLoading()
								console.log('error');
								//新建UserList
								uni.setStorage({
									key: 'UserList',
									data: [{
										username: this.phoneNumber,
										passwd: md5(this.passwd)
									}],
									success: function() {
										uni.hideLoading()
										uni.showToast({
											title: '注册成功',
											icon: "success"
										});
										setTimeout(function() {
											uni.navigateBack();
										}, 1000)
									},
									fail: function(e) {
										console.log('set error:' + JSON.stringify(e));
									}
								});
							}
						});
					}, 1000)
				} else {
					uni.showToast({
						title: '请勿频繁操作',
						icon: "none"
					})
				}

			},
			toLogin() {
				uni.hideKeyboard()
				uni.redirectTo({
					url: 'login'
				});
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	@import "../../style/css/login.scss";

	.agree_box {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;

		radio {
			transform: scale(0.9);
			margin-top: -1px;
		}

		text {
			color: #0055ff;
			font-weight: 550;
		}
	}
</style>